<template>
  <view class="news-detail-container">
    <image v-if="news.cover_url" :src="news.cover_url" class="news-detail-cover" mode="aspectFill" />
    <view class="news-detail-content">
      <view class="news-detail-title">{{ news.title }}</view>
      <view class="news-detail-meta">
        <text class="news-detail-category">#{{ news.category_name }}</text>
        <text class="news-detail-time">{{ formatTime(news.publish_time) }}</text>
      </view>
      <view class="news-detail-body">{{ news.content }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { request } from '../../utiles/request';

const news = ref<any>({});

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '';
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

const getNewsDetail = (id: number) => {
  request({
    url: '/admin/api/news/list',
    method: 'GET',
    data: { }
  }).then(res => {
    if (res.data && res.data.code === 200) {
      const found = res.data.data.find((item: any) => item.id === id);
      if (found) news.value = found;
    }
  });
};

onLoad((options) => {
  if (options && options.id) {
    getNewsDetail(Number(options.id));
  }
});
</script>

<style>
.news-detail-container {
  min-height: 100vh;
  background: #f7fafd;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80rpx;
}
.news-detail-cover {
  width: 100vw;
  height: 340rpx;
  object-fit: cover;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.08);
}
.news-detail-content {
  width: 92vw;
  background: #fff;
  border-radius: 24rpx;
  margin-top: -40rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.08);
  padding: 40rpx 32rpx 32rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.news-detail-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #1976D2;
  margin-bottom: 18rpx;
  line-height: 1.3;
}
.news-detail-meta {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
}
.news-detail-category {
  font-size: 24rpx;
  color: #2196F3;
  background: #e3f2fd;
  border-radius: 8rpx;
  padding: 4rpx 16rpx;
}
.news-detail-time {
  font-size: 24rpx;
  color: #999;
}
.news-detail-body {
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
  margin-top: 8rpx;
  white-space: pre-wrap;
}
</style>